<template>
    <div id="consumerChart"></div>
</template>

<script>
import { defineComponent, getCurrentInstance, nextTick, onMounted } from 'vue'
import { consumer } from '@/echarts/home/index.js'

export default defineComponent({
    setup() {
        onMounted(() => {
            nextTick(() => {
                getConsumer()
            })
        })
        const { proxy } = getCurrentInstance()

        const getConsumer = () => {
            let myCharts = proxy.$echarts.init(document.getElementById('consumerChart'))
            myCharts.setOption(consumer)
        }
    },
})
</script>

<style lang="scss" scoped>
#consumerChart {
    width: 100%;
    height: 100%;
}
</style>
